<!DOCTYPE html>
<html lang="en">

<head>
	
	<meta charset="utf-8" />
	<link rel="apple-touch-icon" sizes="76x76" href="./assets/img/favicon.ico">
	<link rel="icon" type="image/png" href="./assets/img/favicon.ico">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>数据资产管理平台</title>
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
		name='viewport' />
	<!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap-grid.css" rel="stylesheet"> -->
	<link href="./vendor/bootstrap-grid.css" rel="stylesheet">
	<!-- Google Font -->
	<!-- <link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,600,800" rel="stylesheet"> -->
	<link href="./assets/layui/css/layui.css" rel="stylesheet">
	<!-- Font Awesome Icons -->
	<!-- <link rel="stylesheet" href="#" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> -->
	<link rel="stylesheet" href="#" crossorigin="anonymous">

	<!-- Main CSS -->
	<link href="./assets/css/main.css" rel="stylesheet" />

	<!-- Animation CSS -->
	<link href="vendor/aos.css" rel="stylesheet" />


	<style>
		/* body {
			font-size: 17px;
		} */

		.nav-item .active {
			font-weight: 600;
		}

		.card {
			cursor: pointer;
		}

		.card-deck {
			margin-bottom: 15px;
		}

		.ServiceMenu .card-body {
			width: 80px;
			height: 80px;
			overflow: hidden;
			cursor: pointer;
			padding: 0 !important;
			flex: none;
			margin: 10px auto;
		}

		.fun-Directory {
			display: flex;
			flex-wrap: wrap;
		}

		.fun-Directory li {
			width: 16.6%;
		}

		.card-body ul li {
			margin-bottom: 0px !important;
		}

		h3 {
			font-size: 1rem !important;
		}

		.ServiceProduct .card,
		.ServiceMenu .card {
			flex: none;
			width: 22.5% !important;
			margin-left: 1.25% !important;
			margin-right: 1.25% !important;
			margin-bottom: 20px;
		}

		/* 热门产品 */
		/* 大于1680px:默认 */
		/* 1360px ——1680px */
		@media (max-width: 1680px) {

			.ServiceProduct .card,
			.ServiceMenu .card {
				width: 22.5% !important;
				margin-left: 1.25% !important;
				margin-right: 1.25% !important;
			}
		}

		/* 1360px以下 */
		@media (max-width: 1360px) {

			.ServiceProduct .card,
			.ServiceMenu .card {
				width: 30% !important;
				margin-left: 1.66% !important;
				margin-right: 1.66% !important;
			}
		}

		.searchform {
			float: right;
			width: 320px;
			margin-right: 0 !important;
			padding: 0;
			margin-top: 20px;
		}

		.searchform i {
			position: absolute;
			color: rgb(139, 139, 139);
			margin-top: 10.6px;
			margin-left: 10px;
		}

		.searchform input {
			padding-left: 32px;
			width: 305px;
			font-size: 14px;
		}

		.pagehelper {
			padding-top: 0 !important;
			margin-top: -50px;
			margin-bottom: 20px;
		}

		.nav-item .active1 {
			font-weight: 600;
			color: #0F74B5;
		}

		.searchbox {
			font-size: 15px;
		}

		.searchbox span {
			line-height: 49.6px;
			font-size: 17px;
			color: #666666;
		}

		.searchbox .nav3 {
			width: 50%;
			float: left;
			margin-left: -16px;
			margin-top: 15px;
		}

		.searchbox a {
			color: #666666;
		}

		.searchbox a:hover {
			color: #0F74B5;
		}

		.searchform {
			float: right;
			width: 320px;
			margin-right: 0 !important;
			padding: 0;
			margin-top: 20px;
		}

		.searchform i {
			position: absolute;
			color: rgb(139, 139, 139);
			margin-top: 10.6px;
			margin-left: 10px;
		}

		.searchform input {
			padding-left: 32px;
			width: 305px;
			font-size: 14px;
		}

		.searchHeaderBox {
			position: absolute;
			top: 83px;
			z-index: 1999;
			background-color: white;
			width: 400px;
			left: 856px;
			padding: 10px;
		}

		.searchHeaderBox .label {
			padding: 3px 8px;
			border: 1px solid #d8d8d8;
			margin-right: 12px;
			margin-bottom: 10px;
		}

		::-webkit-input-placeholder {
			/* WebKit browsers */
			color: #999;
			font-size: 14px;
		}

		::-moz-placeholder {
			/* Mozilla Firefox 19+ */
			color: #999;
			font-size: 14px;
		}

		:-ms-input-placeholder {
			/* Internet Explorer 10+ */
			color: #999;
			font-size: 14px;
		}
	</style>
</head>

<body>

	<!----------------------------------------------------------------------
NAVBAR (remove topnav if you don't want changed nav background on scroll)
------------------------------------------------------------------------>
	<nav class="topnav navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
		<div class="container-fluid">
			<a class="navbar-brand" href="./index.html"><i class="fas fa-globe-africa mr-2"></i><strong>数据资产管理</strong>
			</a>
			<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02"
				aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="navbar-collapse collapse" id="navbarColor02" style="">
				<ul class="navbar-nav mr-auto d-flex align-items-center">
					<li class="nav-item">
						<a class="nav-link" href="./index.html">门户首页</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./dataResources.html">公开数据</a>
					</li>
<!--					<li class="nav-item dropdown">-->
<!--						<a class="nav-link" href="productStore.html">数据产品 </a>-->
<!--					</li>-->
<!--					<li class="nav-item">-->
<!--						<a class="nav-link" href="./serviceStore.html">服务产品</a>-->
<!--					</li>-->
<!--					<li class="nav-item">-->
<!--						<a class="nav-link" href="./customShop.html">定制数据</a>-->
<!--					</li>-->
					<li class="nav-item">
						<a class="nav-link" href="./developer.html">平台介绍</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./newMessage.html">平台资讯</a>
					</li>
<!--					<li class="nav-item">-->
<!--						<a class="nav-link" href="./accessData.html">数据访问</a>-->
<!--					</li>-->
					<li class="nav-item highSerachBtn">
						<div class="col pt-4 pb-4">
							<a class="btn btn-lg btn-outline-white btn-round searchKeyword text-white"><span
									class="iconbox border-0" style="margin-right: 5px;"><i
										class="fas fa-search"></i></span>搜索</a>
						</div>
					</li>
				</ul>
				<ul class="navbar-nav ml-auto d-flex align-items-center">
<!--					<li class="nav-item">-->
<!--						<a class="nav-link myBtn" href="javascript:;">-->
<!--							<span class="iconbox border-0" style="margin-right: 5px;"><i-->
<!--									class="fas fa-cart-arrow-down"></i></span>产品袋-->
<!--						</a>-->
<!--					</li>-->
					<li class="nav-item">
						<a class="nav-link" href="./mySpace.html">
							<span class="iconbox border-0" style="margin-right: 5px;"><i
									class="fas fa-book-reader"></i></span>用户中心 </a>
					</li>
					<li class="nav-item disabledNone" id="userInfo">
						<ul class="layui-nav" style="background-color: rgba(244, 244, 244, 0);padding: 0;">
							<li class="layui-nav-item">
							  <a href="javascript:;" style="color: #353c58 !important;">
								  <span class="iconbox border-0" style="margin-right: 5px;"><i class="iconfont icon-user-fill"></i></span>
								  用户：<span id="accunt">登录过期</span>
							  </a>
							  <dl class="layui-nav-child">
								<dd><a href="./changePassword.html">修改密码</a></dd>
								<dd><a href="" id="logOutBtn">退出登录</a></dd>
							  </dl>
							</li>
						  </ul>
					</li>
					<li class="nav-item disabledNone" id="attestation">
						<a class="nav-link" style="color:#FF820C;padding-left: 0px;font-size:12px;cursor: pointer;">未认证</a>
					</li>
					<li class="nav-item disabledNone noUser">
						<a class="nav-link" href="./login.html">
							<span class="iconbox border-0" style="margin-right: 5px;"><i
									class="fas fa-user"></i></span>登录 </a>
					</li>
					<li class="nav-item disabledNone noUser">
						<span class="nav-link" href="./register.html">
							<a class="btn btn-cyan btn-round shadow-sm text-white" href="#" data-toggle="modal"
								data-target="#modal_newsletter">
								<i class="fab fa-github"></i> 立即注册 <a href="#" class="downloadzip" class="hidden"></a>
							</a>
						</span>
					</li>
				</ul>
			</div>
		</div>
	</nav>
	<!-- End Navbar -->

	<!-- 顶部搜索框 -->
	<div class="searchHeaderBox disabledNone">
		<div>
			<span style="position: absolute;right: 20px;cursor: pointer;z-index: 9999;"
				id="closeSearchHeaderBox">X</span>
			<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
				<ul class="layui-tab-title">
					<li class="layui-this">关键字</li>
					<li>级别限制</li>
					<li>授权码</li>
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
						<div class="col" style="padding: 0;position: relative;">
							<img src="assets/img/demo/serach.png"
								style="width: 20px;height: 20px;position: absolute;left: 0;top: 7px;">
							<input type="search" class="form-control" placeholder="请输入关键字进行搜索"
								style="border-top:0px;border-left:0px;border-right:0px;border-radius: 0;padding-left: 30px;">
							<span
								style="cursor: pointer;position: absolute;top: 7px;right: 10px;font-size: 14px;">搜索</span>
						</div>
						<div class="mt-3">
							<p style="font-size: 12px;color: #666666;margin-bottom: 5px;">搜索发现</p>
							<div style="font-size: 12px;color: #666666;">
								<span class="label">规范</span>
								<span class="label">授权码</span>
								<span class="label">级别</span>
								<span class="label">消息</span>
							</div>
						</div>
					</div>
					<div class="layui-tab-item">
						<div class="col" style="padding: 0;position: relative;">
							<img src="assets/img/demo/serach.png"
								style="width: 20px;height: 20px;position: absolute;left: 0;top: 7px;">
							<input type="search" class="form-control" placeholder="请输入限制用户级别"
								style="border-top:0px;border-left:0px;border-right:0px;border-radius: 0;padding-left: 30px;">
							<span
								style="cursor: pointer;position: absolute;top: 7px;right: 10px;font-size: 14px;">搜索</span>
						</div>

					</div>
					<div class="layui-tab-item">
						<div class="col" style="padding: 0;position: relative;">
							<img src="assets/img/demo/serach.png"
								style="width: 20px;height: 20px;position: absolute;left: 0;top: 7px;">
							<input type="search" class="form-control" placeholder="请输入授权码"
								style="border-top:0px;border-left:0px;border-right:0px;border-radius: 0;padding-left: 30px;">
							<span
								style="cursor: pointer;position: absolute;top: 7px;right: 10px;font-size: 14px;">搜索</span>
						</div>

					</div>
				</div>
			</div>
		</div>

	</div>
	<!------------------------------------- HEADER --------------------------------------->
	<header>
		<div class="jumbotron jumbotron-lg jumbotron-fluid mb-0 pb-3 bg-primary position-relative">
			<div class="container-fluid text-white h-100">
				<div class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5">
					<div class="col pt-4 pb-4 adaptivity">
						<h1 class="display-3"><strong>数据商店</strong></h1>
						<h4 class="font-weight-light mb-4"><strong> 数据资产管理</strong> <strong></strong></h4>
						<!-- <a href="#" class="btn btn-lg btn-outline-white btn-round">了解更多</a> -->
					</div>
					<div
						class="col align-self-bottom align-items-right text-right h-max-380 h-xl-560 position-relative z-index-1 adaptivity">
						<img src="assets/img/demo/ali/shuzi.gif" class="rounded img-fluid" style="float: left;">
					</div>
				</div>
			</div>

	</header>
	<!--- END HEADER -->

	<!-------------------------------------- CAROUSEL 轮播 --------------------------------------->
	<!-- <section class="pt-4 pb-5" data-aos="fade-up" id="example-carousel" style="padding-top: 0px !important;"> -->
		<!-- <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel"> -->
			<!-- <ol class="carousel-indicators"> -->
				<!-- <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> -->
				<!-- <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> -->
			<!-- </ol> -->
			<!-- <div class="carousel-inner shadow-sm rounded"> -->
				<!-- <div class="carousel-item active" style="height: 400px;"> -->
					<!-- <img class="d-block w-100" src="assets/img/demo/38b3cfa9ab2b5abc8036ad112acbb737.jpeg" -->
						<!-- alt="First slide"> -->
				<!-- </div> -->
				<!-- <div class="carousel-item" style="height: 400px;"> -->
					<!-- <img class="d-block w-100" src="assets/img/demo/83a77d444953b505e8d51a5eb1392543.jpeg" -->
						<!-- alt="Second slide"> -->
				<!-- </div> -->
			<!-- </div> -->
		<!-- </div> -->
	<!-- </section> -->
	<main class="container">
		<!-------------------------------------- PRICING 菜单项 --------------------------------------->
		<section class="pt-4 pb-5" data-aos="fade-up">
			<h3 class="h5 mb-4 font-weight-bold">数据分类</h3>
			<div class="card-deck card-pricing text-center ServiceMenu">
				<div class="card border-0 shadow-sm" data-index="0">
					<div class="card-body">
						<img class="d-block w-100" src="./assets/img/demo/ali/TB1qolSVhz1gK0jSZSgXXavwpXa-128-2688.png"
							alt="热门产品">
					</div>
					<div class="card-header border-0 pt-4 pb-4">
						<h3 class="my-0 font-weight-normal">气象商品</h3>
					</div>

				</div>
				<div class="card shadow-sm border-0" data-index="1">
					<div class="card-body">
						<img class="d-block w-100" src="./assets/img/demo/ali/TB1u12whCslXu8jSZFuXXXg7FXa-128-2688.png"
							alt="资源信息">
					</div>
					<div class="card-header border-0 pt-4 pb-4">
						<h3 class="my-0 font-weight-normal">资源信息</h3>
					</div>

				</div>
				<div class="card border-0 shadow-sm" data-index="2">
					<div class="card-body">
						<img class="d-block w-100" src="assets/img/demo/ali/TB1gnuZiipE_u4jSZKbXXbCUVXa-128-2688.png"
							alt="数据分类">
					</div>
					<div class="card-header border-0 pt-4 pb-4">
						<h3 class="my-0 font-weight-normal">数据分类</h3>
					</div>

				</div>
				<div class="card shadow-sm border-0" data-index="3">
					<div class="card-body">
						<img class="d-block w-100" src="assets/img/demo/ali/TB1cHirmP39YK4jSZPcXXXrUFXa-128-2688.png"
							alt="数据分类">
					</div>
					<div class="card-header border-0 pt-4 pb-4">
						<h3 class="my-0 font-weight-normal">数据分类</h3>
					</div>

				</div>
			</div>
			<!-- <div class="card-deck card-pricing text-center ServiceMenu">
	<div class="card border-0 shadow-sm" data-index="4">
		<div class="card-body">
			<img class="d-block w-100" src="assets/img/demo/ali/O1CN019FqNuv2NjaswQicY2_!!19999999999999-2-tps.png" alt="开发指南">
		</div>
		<div class="card-header border-0 pt-4 pb-4">
			<h3 class="my-0 font-weight-normal">数据分类</h3>
		</div>

	</div>
	<div class="card shadow-sm border-0" data-index="5">
		<div class="card-body">
			<img class="d-block w-100" src="assets/img/demo/ali/TB111c4mz39YK4jSZPcXXXrUFXa-128-2688.png" alt="最新消息">
		</div>
		<div class="card-header border-0 pt-4 pb-4">
			<h3 class="my-0 font-weight-normal">数据分类</h3>
		</div>

	</div>
	<div class="card border-0 shadow-sm" data-index="6">
		<div class="card-body">
			<img class="d-block w-100" src="assets/img/demo/ali/TB1SwmqiODsXe8jSZR0XXXK6FXa-128-2688.png" alt="统计数据">
		</div>
		<div class="card-header border-0 pt-4 pb-4">
			<h3 class="my-0 font-weight-normal">数据分类</h3>
		</div>

	</div>
	<div class="card shadow-sm border-0" data-index="7">
		<div class="card-body">
			<img class="d-block w-100" src="assets/img/demo/ali/TB1C7fPidTfau8jSZFwXXX1mVXa-128-2688.png" alt="热门排行">
		</div>
		<div class="card-header border-0 pt-4 pb-4">
			<h3 class="my-0 font-weight-normal">数据分类</h3>
		</div>

	</div>
</div> -->
			<!-- <div class="container" style="margin-top: 40px;">
	<div class="row">
		<ul class="list-unstyled text-small fun-Directory" id="directory">
			<li><a class="text-muted" href="./dataStoreDetial.html?serverId=8">法人信息</a></li>
			<li><a class="text-muted" href="./dataStoreDetial.html?serverId=7">纳税人信息</a></li>
			<li><a class="text-muted" href="./dataStoreDetial.html?serverId=9">资源共享</a></li>
			<li><a class="text-muted" href="#">平均气温</a></li>
			<li><a class="text-muted" href="#">最高气温</a></li>
			<li><a class="text-muted" href="#">最低气温</a></li>
			<li><a class="text-muted" href="#">数据产品</a></li>
			<li><a class="text-muted" href="#">数据产品</a></li>
			<li><a class="text-muted" href="#">数据产品</a></li>
			<li><a class="text-muted" href="#">数据产品</a></li>
			<li><a class="text-muted" href="#">数据产品</a></li>
			<li><a class="text-muted" href="#">数据产品</a></li>
		</ul>

	</div>
</div> -->
		</section>
		<!-------------------------------------- PRICING --------------------------------------->
		<section class="pb-5" data-aos="fade-up">
			<!-- 搜索 -->
			<div class="searchbox">
				<ul class="nav nav3">
					<li class="nav-item">
						<a class="nav-link active1" href="#">综合排序</a>
					</li><span>|</span>
					<li class="nav-item">
						<a class="nav-link" href="#">最近更新</a>
					</li><span>|</span>
					<li class="nav-item">
						<a class="nav-link" href="#">最高人气</a>
					</li><span>|</span>
					<li class="nav-item">
						<a class="nav-link" href="#">最好评价</a>
					</li>
				</ul>
				<div class="form-group searchform">
					<div class="col-sm-10">
						<i class="fas fa-search"></i>
						<input type="search" id="searchInput" class="form-control" value="" placeholder="请输入关键字搜索产品">
					</div>
				</div>
				<div style="clear: both;"></div>
			</div>
		</section>

		<section class="pt-4 pb-5" data-aos="fade-up">
			<h3 class="h5 mb-4 font-weight-bold">数据产品</h3>
			<div class="card-deck card-pricing ServiceProduct">
				<div class="card shadow-sm border-0">
					<div class="card-header border-0">
						<h3 class="my-0 font-weight-normal">法人信息</h3>
					</div>
					<div class="card-body">
						<ul class="list-unstyled mt-2 mb-2">
							<li>商铺： 数据中台</li>
							<li>
								<span
									style="border: 1px solid #bbb;border-radius: 2px;font-size: 12px;color: #999;line-height: 18px;margin-right: 6px;padding: 0 6px;">自由弹性</span>
								<span
									style="border: 1px solid #bbb;border-radius: 2px;font-size: 12px;color: #999;line-height: 18px;margin-right: 6px;padding: 0 6px;">降低运维成本</span>
							</li>
						</ul>
					</div>
				</div>
				<div class="card shadow-sm border-0">
					<div class="card-header border-0">
						<h3 class="my-0 font-weight-normal">纳税人信息</h3>
					</div>
					<div class="card-body">
						<ul class="list-unstyled mt-2 mb-2">
							<li>商铺： 数据中台</li>
							<li>
								<span
									style="border: 1px solid #bbb;border-radius: 2px;font-size: 12px;color: #999;line-height: 18px;margin-right: 6px;padding: 0 6px;">自由弹性</span>
								<span
									style="border: 1px solid #bbb;border-radius: 2px;font-size: 12px;color: #999;line-height: 18px;margin-right: 6px;padding: 0 6px;">降低运维成本</span>
							</li>
						</ul>
					</div>
				</div>
				<div class="card shadow-sm border-0">
					<div class="card-header border-0">
						<h3 class="my-0 font-weight-normal">资源共享</h3>
					</div>
					<div class="card-body">
						<ul class="list-unstyled mt-2 mb-2">
							<li>商铺： 数据中台</li>
							<li>
								<span
									style="border: 1px solid #bbb;border-radius: 2px;font-size: 12px;color: #999;line-height: 18px;margin-right: 6px;padding: 0 6px;">自由弹性</span>
								<span
									style="border: 1px solid #bbb;border-radius: 2px;font-size: 12px;color: #999;line-height: 18px;margin-right: 6px;padding: 0 6px;">降低运维成本</span>
							</li>
						</ul>
					</div>
				</div>
				<div class="card shadow-sm border-0">
					<div class="card-header border-0">
						<h3 class="my-0 font-weight-normal">平均气温</h3>
					</div>
					<div class="card-body">
						<ul class="list-unstyled mt-2 mb-2">
							<li>商铺： 气象数据中心</li>
							<li>
								<span
									style="border: 1px solid #bbb;border-radius: 2px;font-size: 12px;color: #999;line-height: 18px;margin-right: 6px;padding: 0 6px;">自由弹性</span>
								<span
									style="border: 1px solid #bbb;border-radius: 2px;font-size: 12px;color: #999;line-height: 18px;margin-right: 6px;padding: 0 6px;">降低运维成本</span>
							</li>
						</ul>
					</div>
				</div>

			</div>
		</section>

		<!-- 分页 -->
		<section class="pt-4 pb-5 pagehelper" data-aos="fade-up">
			<nav aria-label="Page navigation example" style="float: right;">
				<ul class="pagination">
					<li class="page-item">
						<a class="page-link" href="#" aria-label="Previous">
							<span aria-hidden="true">&laquo;</span>
						</a>
					</li>
					<li class="page-item active"><a class="page-link" href="#">1</a></li>
					<li class="page-item"><a class="page-link" href="#">2</a></li>
					<li class="page-item"><a class="page-link" href="#">3</a></li>
					<li class="page-item">
						<a class="page-link" href="#" aria-label="Next">
							<span aria-hidden="true">&raquo;</span>
						</a>
					</li>
				</ul>
			</nav>
		</section>
	</main>

	<!-------------------------------------- FOOTER 底部 --------------------------------------->
	<footer class="bg-black pb-5" style="padding-top: 20px;padding-bottom: 20px !important;background-color: #FF6A00;">
		<div class="container">
			<div class="row" style="text-align: center;">
				<div class="col-12 col-md mr-4">
					<small class="d-block mt-3 text-muted" style="color: white !important;">
						<p style="color: white;margin-top: 10px;font-size: 30px;">数据资产管理平台</p>
						Copyright @ 2024 数据资产管理平台-版权所有 蜀ICP备202423603号
					</small>
				</div>
			</div>
		</div>
	</footer>



	<!-------------------------------------- JAVASCRIPTS --------------------------------------->
	<script src="vendor/jquery.min.js" type="text/javascript"></script>
	<script src="vendor/popper.min.js" type="text/javascript"></script>
	<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="vendor/share.js" type="text/javascript"></script>
	<script src="js/functions.js" type="text/javascript"></script>
	<!-- <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/js/bootstrap.bundle.js"></script> -->
	<script src="./vendor/bootstrap.bundle.js"></script>
	<script src="./assets/layui/layui.js" type="text/javascript"></script>
	<script src="js/tool.js" type="text/javascript"></script>
	<script src="js/header.js" type="text/javascript"></script>
	<!-- tab事件-->
	<script>
		$(function () {
			$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
				// 获取已激活的标签页的名称
				var activeTab = $(e.target).text();
				// 获取前一个激活的标签页的名称
				var previousTab = $(e.relatedTarget).text();
				$(".active-tab span").html(activeTab);
				$(".previous-tab span").html(previousTab);
			});
		});
	</script>
	<!-- Animation -->
	<script src="vendor/aos.js" type="text/javascript"></script>
	<noscript>
		<style>
			*[data-aos] {
				display: block !important;
				opacity: 1 !important;
				visibility: visible !important;
			}
		</style>
	</noscript>
	<script>
		AOS.init({
			duration: 700
		});
	</script>

	<!-- Disable animation on less than 1200px, change value if you like -->
	<script>
		AOS.init({
			disable: function () {
				var maxWidth = 1200;
				return window.innerWidth < maxWidth;
			}
		});
	</script>

	<!-- Carousel Height Smooth -->
	<!-- <script>
    $('.carousel').on('slide.bs.carousel', function (event) {
      var height = $(event.relatedTarget).height();
      var $innerCarousel = $(event.target).find('.carousel-inner');
      $innerCarousel.animate({
        height: height
      });
    });
    </script> -->

	<!-- Popovers -->
	<script>
		$(function () {
			$('[data-toggle="popover"]').popover()
		})
		$('.popover-dismiss').popover({
			trigger: 'focus'
		})
	</script>

	<!-- Tooltips -->
	<script>
		$(function () {
			$('[data-toggle="tooltip"]').tooltip()
		})
	</script>

	<script>
		$(function () {

			//顶部搜索
			$(".searchKeyword").click(function () {
				$(".searchHeaderBox").removeClass("disabledNone")
			})
			$("#closeSearchHeaderBox").click(function () {
				$(".searchHeaderBox").addClass("disabledNone")
			})
			//数据分类
			$.ajax({
       timeout:30000,
				type: 'GET',
				url: window.Http + "/customer/shared/directory/list?pageNum=1&pageSize=8",
				headers: {
					'Authorization': "Bearer " + sessionStorage.getItem('Token')
				},
				success: function (res) {
					if (res.code == 200) {
						$(".ServiceMenu").empty()
						if (res.data.rows && res.data.rows.length > 0) {
							let html = "";
							let imgUrl = "./assets/img/demo/ali/TB1qolSVhz1gK0jSZSgXXavwpXa-128-2688.png";
							res.data.rows.forEach(function (val, index) {
								switch (index) {
									case 1:
										imgUrl = "./assets/img/demo/ali/TB1u12whCslXu8jSZFuXXXg7FXa-128-2688.png";
										break;
									case 2:
										imgUrl = "./assets/img/demo/ali/TB1gnuZiipE_u4jSZKbXXbCUVXa-128-2688.png";
										break;
									case 3:
										imgUrl = "./assets/img/demo/ali/TB1cHirmP39YK4jSZPcXXXrUFXa-128-2688.png";
										break;
									case 4:
										imgUrl = "./assets/img/demo/ali/O1CN019FqNuv2NjaswQicY2_!!19999999999999-2-tps.png";
										break;
									case 5:
										imgUrl = "./assets/img/demo/ali/TB1.6kUU4v1gK0jSZFFXXb0sXXa-128-2688.png";
										break;
									case 6:
										imgUrl = "./assets/img/demo/ali/TB111c4mz39YK4jSZPcXXXrUFXa-128-2688.png";
										break;
									case 7:
										imgUrl = "./assets/img/demo/ali/TB1C7fPidTfau8jSZFwXXX1mVXa-128-2688.png";
										break;

									default:
										break;
								}
								html += `<div class="card border-0 shadow-sm" data-ID="` + val.id + `">
									<div class="card-body">
										<img class="d-block w-100" src="`+ imgUrl + `" alt="` + val.name + `">
									</div>
									<div class="card-header border-0 pt-4 pb-4">
										<h3 class="my-0 font-weight-normal">`+ val.name + `</h3>
									</div>

								</div>`
							})
							$(".ServiceMenu").append(html);
							sessionStorage.setItem('directoryId',res.data.rows[0].id)
							productData(res.data.rows[0].id,1)
						}
					}
				}
			})

			//数据产品
			function productData(directoryId,n) {
				$.ajax({
       timeout:30000,
					type: 'GET',
					url: window.Http + "/customer/shared/data/item/list?isAdmin=1&pageNum="+n+"&pageSize=12&directoryId=" + directoryId,
					headers: {
						'Authorization': "Bearer " + sessionStorage.getItem('Token')
					},
					success: function (res) {
						console.log(res);
						if (res.code == 200) {
							Render(res)
							renderPage(res.data.total,n)
						}
					}
				})
			}
			//处理分页
			let pageNumber;
			function renderPage(num,pagen){
				pagen-=-1;
				pageNumber = Math.ceil(num/10);
				let html = '';
				$('.pagination').empty();
				$('.pagination').append(`<li class="page-item previous"> <a class="page-link" href="#" aria-label="Previous">
					<span aria-hidden="true">&laquo;</span></a></li>
					<li class="page-item next"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>`)
				for(var i=1;i<=pageNumber;i++){
					html+=`<li class="page-item"><a class="page-link pageN" href="#">`+i+`</a></li>`
				}
				$('.pagination li:first-child').after(html)
				$('.pagination li:nth-child('+pagen+')').addClass('active')
			}

			// 分页(数字)
			$('.pagination').on('click', '.pageN', function (e) {
				e.preventDefault()
				// 获取页数
				let num = $(this)[0].innerHTML;
				let id=sessionStorage.getItem('directoryId')
				productData(id,num);// 发送请求
			})
			// 分页(上一页)
			$('.pagination').on('click','.previous',function (e) {
				e.preventDefault()
				// 获取当前页数
				let num = $(this).siblings('.active')[0].children[0].innerHTML;
				if (num > 1) {
					num -= 1;
					let id=sessionStorage.getItem('directoryId')
					productData(id,num);// 发送请求
				}
			})
			// 分页(下一页)
			$('.pagination').on('click','.next',function (e) {
				e.preventDefault()
				// 获取当前页数
				let num = $(this).siblings('.active')[0].children[0].innerHTML;
				if (num <pageNumber) {
					num -=-1;
					let id=sessionStorage.getItem('directoryId')
					productData(id,num);// 发送请求
				}
			})

			// 渲染页面
			function Render(res){
				$(".ServiceProduct").empty()
				if (res.data.rows && res.data.rows.length > 0) {
					let html = ""
					res.data.rows.forEach(function (val, index) {
						html += `<div class="card shadow-sm border-0" data-ID=` + val.id + `>
		  						<div class="card-header border-0">
		  							<h3 class="my-0 font-weight-normal">`+ val.chineseName + `</h3>
		  						</div>
		  						<div class="card-body">
		  							<ul class="list-unstyled mt-2 mb-2">
										<li> `+ val.sellPoint + `</li>
		  								<li>
		  									<span style="border: 1px solid #bbb;border-radius: 2px;font-size: 12px;color: #999;line-height: 18px;margin-right: 6px;padding: 0 6px;">`+ val.tagStr + `</span>

		  								</li>
		  							</ul>
		  						</div>
		  					</div>`
					})
					$(".ServiceProduct").append(html);
				} else {
					let html = `<div class="card shadow-sm border-0" style="cursor: default;">
		  					<div class="card-header border-0">
		  						<h3 class="my-0 font-weight-normal">暂无产品</h3>
		  					</div>
		  				</div>`

					$(".ServiceProduct").append(html);
				}
			}

			$('#searchInput').bind('keypress', function (e) {
				if (e.keyCode == '13') {
					// $.ajax({
       timeout:30000,
					// 	type: 'GET',
					// 	url: window.Http + "/customer/shared/data/item/list?isAdmin=1&pageNum=1&pageSize=12&keyword="+$("#searchInput").val(),
					// 	headers: {
					// 		'Authorization': "Bearer " + sessionStorage.getItem('Token')
					// 	},
					// 	success: function (res) {
					// 		if (res.code == 200) {
					// 			Render(res)
					// 		}
					// 	}
					// })
				}
			})

			//点击分类
			$(".ServiceMenu").delegate(".card", "click", function () {
				sessionStorage.setItem('directoryId',$(this).attr("data-ID"))
				productData($(this).attr("data-ID"),1)
			});
			//点击产品
			$(".ServiceProduct").delegate(".card", "click", function () {
				let dataId = $(this).attr("data-ID");
				window.location.href = './serviceDetial.html?goodsType=2&directoryId=' + dataId;
			});

			$('.nav3 .nav-item a').click(function (e) {
				e.preventDefault();
				$(".nav3 .nav-item a").removeClass('active1')
				$(this).addClass("active1")
			})


		})
	</script>

</body>

</html>
